<template>
  <div class="change-pass">
    <el-form
      class="user-account-key"
      :model="passwordForm"
      ref="passwordForm"
      :rules="rules"
    >
      <el-form-item label="原密码" prop="password">
        <el-input
          type="password"
          style="width: 240px"
          placeholder="请输入原密码"
          v-model="passwordForm.password"
          show-password
        ></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="new_password">
        <el-input
          type="password"
          style="width: 240px"
          placeholder="请设置新密码"
          v-model="passwordForm.new_password"
          show-password
        ></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPassword">
        <el-input
          style="width: 240px"
          type="password"
          placeholder="请确认新密码"
          v-model="passwordForm.checkPassword"
          show-password
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="onSubmit('passwordForm')">修改</el-button>
        <el-button @click="resetForm('passwordForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'Change',
  data() {
    return {
      passwordForm: {
        password: '',
        new_password: '',
        checkPassword: '',
      },
      rules: {
        password: [
          { required: true, message: '用户名不能为空', trigger: 'blur' },
          {
            // validator: validatePass,
            message: '用户名不能为空',
            trigger: 'blur',
          },
        ],
        new_password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
        ],
        checkPassword: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          // { validator: checkpass, trigger: 'blur' },
        ],
      },
      dialogFormVisible: false,
    }
  },
  created() {
    //若无身份信息,跳转登录页
    if (!localStorage.getItem('user')) {
      this.$router.push('/login')
    }
  },
  methods: {
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.passwordForm.password === this.passwordForm.new_password) {
            this.$message.error('原密码不能和新密码相同')
            return
          }
          if (
            this.passwordForm.new_password != this.passwordForm.checkPassword
          ) {
            this.$message.error('确认密码与新密码不一致')
            return
          }
          this.$http
            .put('/API/V1/admin/users/' + localStorage.user, this.passwordForm)
            .then((data) => {
              const { code, message } = data
              //     localStorage.setItem('user', user_id)
              //     sessionStorage.setItem('user', user_id)
              if (code == 0) {
                this.$message.success('成功修改密码,请重新登录')
                this.$router.push('/login')
              } else {
                alert(message)
              }
            })
        } else {
          this.$message.error('验证不通过')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
  },
}
</script>
